<template>
  <div class="container">
    <div class="header">
      <button class="back-button" @click="goBack">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
    <div class="dropdown-row">
      <el-dropdown trigger="click" @command="handleCommand" placement="bottom-start">
        <div class="el-dropdown-link" :class="{ 'has-selection': selecting !== -1 }">
          <el-icon >
            <CirclePlus v-if="selecting === -1" />
            <DocumentAdd v-else />
          </el-icon>
          <span style="margin-left: 10px;">{{ selecting === -1 ? '请选择本次投递的简历' : '已选择简历' }}</span>
          <el-icon class="dropdown-arrow"><ArrowRight /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu v-if="!loadingList" class="custom-dropdown">
            <el-dropdown-item :command="-1" class="dropdown-header">
              请选择简历
            </el-dropdown-item>
            <div class="dropdown-divider"></div>
            <div class="dropdown-scrollable">
              <el-dropdown-item
                  v-for="(item, index) in legoCreateList"
                  :key="index"
                  :command="index"
                  class="resume-item"
              >
                <div class="resume-item-date">{{ formatDate(new Date(item.createDate)) }}</div> |
                <div class="resume-item-title">{{ item.title }}</div>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
          <div v-else class="loading-dropdown">
            <el-icon class="loading-icon"><i class="el-icon-loading"></i></el-icon>
            加载中...
          </div>
        </template>
      </el-dropdown>
    </div>
    <div class="content-row">
      <div class="left-center">
        <div class="resume-card">
          <div class="resume-preview" v-if="selecting!==-1">
            <resume-preview :show-line="true"></resume-preview>
          </div>
          <div v-else class="empty-state">
            <el-icon class="empty-icon"><DocumentAdd /></el-icon>
            <h3 class="empty-title">暂无选中的简历</h3>
            <p class="empty-desc">请从上方下拉菜单中选择一份简历来查看详情和优化建议</p>
          </div>
        </div>
      </div>
      <div class="right-centered">
        <RadarChart :resumeId="getResumeId()"></RadarChart>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import RadarChart from "@/views/optimizeResume/components/RadarChart.vue";
import {ElMessage} from "element-plus";
import ResumePreview from "@/views/createTemplate/previewer/index.vue";
import {storeToRefs} from "pinia";
import appStore from "@/store";
import {ArrowRight,CirclePlus, DocumentAdd} from "@element-plus/icons-vue";
import router from "@/router";
import {getResumeList, getResumeJsonById} from "@/http/m_api/template";
import {onMounted, ref} from "vue";
import {formatDate} from "@/assets/ts/utils";
import {HideNavbar, showNavbar} from "@/utils/common";
import {useRoute} from "vue-router";

const legoCreateList = ref<Array<any>>([]);
const loading = ref(true);
const selecting = ref(-1);
const route = useRoute();
const { HJNewJsonStore ,resumeId} = storeToRefs(appStore.useCreateTemplateStore);
const resumeID = ref();
const loadingPreview = ref(false);
const loadingList = ref(false);


onMounted(()=> {
  // console.log(route)
  resumeID.value = Number.parseInt(route.params.id as string)
  getUserTemplateList()
  HideNavbar()
})

const getUserTemplate = async (id: string) => {
  loadingPreview.value = true
  const data = await getResumeJsonById(id);
  if (data.code === 0) {
    HJNewJsonStore.value = JSON.parse(data.data.templateJson);
    HJNewJsonStore.value.props.title = HJNewJsonStore.value.config.title;
    loadingPreview.value = false;
    resumeId.value = id
  }
};
const getUserTemplateList = async () => {
  let params = {
    page: 1,
    limit: 100
  };
  loadingList.value = true
  const data = await getResumeList(params.page, params.limit);
  if (data.code === 0) {
    loadingList.value = false
    legoCreateList.value = data.data.list;
    legoCreateList.value.map((item: any) => {
      item.previewUrl = item.templateCover;
    });
  } else {
    ElMessage.error(data.message);
  }
};
const handleCommand = (command: number) => {
  selecting.value = command;
  if(selecting.value!==-1) {
    getUserTemplate(legoCreateList.value[selecting.value].id);
  }
}

const getResumeId = () => {
  if(selecting.value !== -1){
    resumeID.value = legoCreateList.value[selecting.value].id;
  }
  else{
    resumeID.value = '';
  }
  return  resumeID.value;
}

const goBack = () => {
  showNavbar()
  router.go(-1);
};
</script>


<style scoped lang="css">
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vw;
  background-color: #f0f4ff;
  padding-left: 2rem;
  padding-right: 2rem;
  gap: 0.5rem;
}

.header {
  padding: 5px;
  display: flex;

}
.back-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 48px;
}

.back-button:hover {
  color: #333;
}

.dropdown-row {
  width: 100%;
  padding-left: 1rem;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.content-row {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 2rem;
}

.left-center {
  height: 80vh;
  width: 50%;
}

.resume-card {
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  background-color: #ffffff;
}
.resume-preview {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  background-color: #ffffff;
  border-radius: 20px;
}

.empty-icon {
  font-size: 64px;
  color: #c0c4cc;
  margin-bottom: 1.5rem;
}

.empty-title {
  font-size: 22px;
  color: #303133;
  margin-bottom: 1rem;
  font-weight: 500;
}

.empty-desc {
  font-size: 16px;
  color: #909399;
  max-width: 80%;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.right-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  margin-right: 2rem;
  height: 80vh;
  width: 50%;
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-row {
    flex-direction: column;
  }

  .left-center, .right-centered {
    width: 100%;
    height: auto;
    min-height: 50vh;
  }
}
</style>